<!-- 分页组件 -->

<template>
  <div class="admin_pagination">
    <!-- **条/页 -->
    <el-pagination
      class="bg pag1"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :pager-count="5"
      layout="sizes">
    </el-pagination>

    <el-pagination
      class="bg pag2"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-count="pageCount"
      :pager-count="5"
      layout="slot, prev, pager, next"
      >
      <button @click="toFirstPage" class="icon"><i class="toFirst self_icon"></i></button>
    </el-pagination>

    <!-- 最后一页 -->
    <el-pagination
      class="bg pag3"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      layout="slot">
      <button @click="toLastPage"  class="icon"><i class="toLast self_icon"></i></button>
    </el-pagination>

    <!-- 总条数 -->
    <div class="el-pagination total_box">
      <span class="total">{{`[共${Math.ceil(this.childTotalNum/this.pageSize)}页/${this.childTotalNum}条数据]`}}</span>
    </div>



    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :pager-count="5"
      layout="jumper, slot"
      :total='totalNum'>
      <span class="go">GO</span>
    </el-pagination>

  </div>
</template>



<script>
  export default {
    props: ['totalNum', 'initName'],
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        pageCount: 1,
        childTotalNum: 1,
        pageData: {
          currentPage: 1,
          pageSize: 10,
        }
      }
    },
    watch: {
      totalNum(newValue, oldV) {
        this.childTotalNum = newValue
        this.pageCount = Math.ceil(this.childTotalNum / 10);
      },
      // pageData: {
      //   handler(newVal) {
      //     this.$emit('changePageData', newVal);
      //   },
      //   deep: true
      // }
    },
    methods: {
      handleSizeChange(num) {       // 更改每页条数
        this.pageSize = num;
        this.pageCount = Math.ceil(this.childTotalNum / num);
        this.$parent[this.initName](this.currentPage, num)
        this.pageData.pageSize = num
      },
      handleCurrentChange(i) {     // 切换页码
        this.currentPage = i;
        this.$parent[this.initName](i, this.pageSize);
        // this.$emit('changeCurrentPage', i);
        this.pageData.currentPage = i
      },
      toFirstPage() {
        this.currentPage = 1;
        this.$parent[this.initName](this.currentPage, this.pageSize);
      },
      toLastPage() {
        this.currentPage = Math.ceil(this.totalNum / this.pageSize);
        this.$parent[this.initName](this.currentPage, this.pageSize);
      },
      goToPage(i) {

      }
    },
    
  }

</script>


<style lang="scss">
.admin_pagination .el-pagination { display: inline-block; }
.admin_pagination .el-pagination button,.admin_pagination .el-pagination span:not([class*=suffix]){ height: 24px; line-height: 24px; font-size: 12px; font-family: 'MicroSoft Yahei'; }
.admin_pagination{ font-size: 0 !important; }
.admin_pagination .el-pagination__sizes{ width: 88px; height: 24px;   }
.admin_pagination .el-pagination__sizes .el-select--mini{ width: 100%; height: 24px; border-radius: 4px;  }
.admin_pagination .el-pagination .el-select .el-input{ width: 100%; margin: 0;  }
.admin_pagination .el-input__inner{ border: none; background: #f1f6fd; width: 88px; height: 24px; font-size: 12px !important;  }
.admin_pagination .el-input--mini .el-input__icon{ line-height: 24px; }

.admin_pagination ul.el-pager { height: 24px; }
.admin_pagination ul.el-pager li { height: 24px; line-height: 24px; font-size: 12px;color: #458afb;font-weight: bold; min-width: 25px; padding: 0; }
.admin_pagination ul.el-pager li.active {  color: #535353;font-weight: normal;  }
.admin_pagination .go { width: 40px; height:24px; background: #458afb; font-weight: 400; margin-left: 10px;
 color: #fff; text-align: center; border-radius: 4px; cursor: pointer; }
.admin_pagination .go:hover{ background-color: #2567d3 !important; border-color: #2567d3 !important; }
.admin_pagination .go:active {background-color: #1951ab !important; border-color: #1951ab !important;}

// .admin_pagination .el-icon-arrow-left:before, .el-icon-arrow-right:before{ color: #458afb; font-weight: bold; }
.admin_pagination .el-pagination .btn-prev,.admin_pagination .el-pagination .btn-next{ padding-right: 0; padding-left: 0; min-width: 28px; }
.admin_pagination .el-pager .more:before{ line-height: 24px; }
.admin_pagination .el-pagination__jump .el-input__inner{ width: 25px; height: 24px !important; line-height: 24px;}
.admin_pagination .el-pagination__jump { margin-left: 0; }

.admin_pagination .btn-prev,.admin_pagination .el-pager,.admin_pagination .btn-next,.admin_pagination .el-pager li { background: #f1f6fd !important; }
.admin_pagination .bg { background: #f1f6fd !important; padding: 0; border-radius: 4px; }
.admin_pagination .el-pagination {}
.admin_pagination .pag1 { width: 85px; margin-right: 10px;  }
.admin_pagination .pag2{ padding-left: 5px; }
.admin_pagination .pag2 button { min-width: 20px !important;}
.admin_pagination .pag3 { border-radius: 0 4px 4px 0; padding-right: 5px; margin-right: 10px; }
.admin_pagination .pag3 button {  min-width: 20px !important; }
.admin_pagination .pag4 .total { font-weight: normal; }
.admin_pagination .icon { cursor: pointer; }

.admin_pagination .el-pagination .self_icon { height: 9px; width: 8px; display: inline-block; min-width: 8px; }
.admin_pagination .toFirst {  background: url('../../assets/img/tofirst.png') 0 0 no-repeat; }
.admin_pagination .toLast {  background: url('../../assets/img/tolast.png') 0 0 no-repeat }


.admin_pagination .total { font-size: 12px; display: inline-block; font-weight: normal; }

// 右箭头
.admin_pagination .el-icon-arrow-right { width: 7px; height: 9px; background: url('../../assets/img/icon-arrow-right.png') 0 0 no-repeat; margin: 1px auto 0; }
.admin_pagination .el-icon-arrow-right:before{ content: ''; }
// 左箭头
.admin_pagination .el-icon-arrow-left  { width: 7px; height: 9px; background: url('../../assets/img/icon-arrow-left.png') 0 0 no-repeat;  margin: 1px auto 0; }
.admin_pagination .el-icon-arrow-left:before{ content: ''; }
</style>